<template>
	<view class="goodDetails">
		<view class="weipperBox">
			<u-swiper :list="swipperList" indicator indicatorMode="line" circular height="500"></u-swiper>
		</view>
		<view class="flex flex-column pb-18">
			<view class="bgcolor1 mb-1 p-2">
				<p class="font-38 font-weight-bold">梅赛德斯奔驰M3，最高配置典藏版，你值得拥有一辆属于你的梦中情车</p>
				<view class="flex justify-between ftcolor2 font-weight-bold font-30 mt-2">
					<p>兑换积分</p>
					<p class="">100</p>
				</view>
			</view>
			<view class="flex flex-column bgcolor1 rounded py-2 px-2">
				<p class="font-38 font-weight-bold pb-3">商品详情</p>
				<p>梅赛德斯奔驰M3，最高配置典藏版，你值得拥有一辆属于你的梦中情车</p>
				<p>梅赛德斯奔驰M3，最高配置典藏版，你值得拥有一辆属于你的梦中情车</p>
				<p>梅赛德斯奔驰M3，最高配置典藏版，你值得拥有一辆属于你的梦中情车</p>
				<p>梅赛德斯奔驰M3，最高配置典藏版，你值得拥有一辆属于你的梦中情车</p>
				<p>梅赛德斯奔驰M3，最高配置典藏版，你值得拥有一辆属于你的梦中情车</p>
				<p>梅赛德斯奔驰M3，最高配置典藏版，你值得拥有一辆属于你的梦中情车</p>
				<p>梅赛德斯奔驰M3，最高配置典藏版，你值得拥有一辆属于你的梦中情车</p>
				<p>梅赛德斯奔驰M3，最高配置典藏版，你值得拥有一辆属于你的梦中情车</p>
				<p>梅赛德斯奔驰M3，最高配置典藏版，你值得拥有一辆属于你的梦中情车</p>
				<p>梅赛德斯奔驰M3，最高配置典藏版，你值得拥有一辆属于你的梦中情车</p>
			</view>
		</view>

		<view class="bgcolor1 border2 py-3 fixed-bottom" @click="duihuan">
			<p class="bgcolor2 btnBox mx-3">立即兑换</p>
		</view>

		<u-popup :show="show" mode="center" round="12" :closeOnClickOverlay='true' @close="close">
			<view class="pt-2 font-weight-bold exchangebox">
				<view class="fs-32 font-weight-bold text-center pb-3">兑换</view>
				<view class="flex px-3">
					<text>数量：</text>
					<u-number-box button-size="50" inputWidth="100" v-model="value" :min="1" integer
						@change="valChange"></u-number-box>
				</view>
				<view class="flex pt-3 px-3">
					<p>消耗积分：200</p>
				</view>
				<view class="flex justify-between mt-3 text-center">
					<p class="border flex-1 py-1" @click="cancel">取消</p>
					<p class="flex-1 bgcolor2 py-1 ftcolor7" @click="confirm">确认</p>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swipperList: [
					'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00164-1636.jpg',
					'https://img1.baidu.com/it/u=1836965205,3611344689&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800',
					'https://img1.baidu.com/it/u=837799999,3532737468&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
				],
				show: false,
				value: 0
			}
		},
		methods: {
			// 立即兑换按钮
			duihuan() {
				this.show = true
			},
			// 关闭弹窗
			cancel() {
				this.show = false
			},
			confirm() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss">
	.goodDetails {
		.exchangebox {
			width: 550rpx;
		}

		.btnBox {
			color: #FFFFFF;
			padding: 20rpx 0;
			text-align: center;
			border-radius: 50rpx;
			font-size: 34rpx;
			font-weight: bold;
		}

		.pb-18 {
			padding-bottom: 180rpx;
		}

		.border2 {
			border-width: 1px;
			border-style: solid;
			border-color: #FFFFFF;
		}
	}
</style>